import styles from "@pages/home/widgets/channel/styles/styles.module.less";
import classNames from "classnames";
import GeekIcon from "@shared/geekIcon";
import UserChannel from "@pages/home/widgets/userChannel";
import { useTypedSelector } from "@store/index";
import { selectToken } from "@slice/credentials";
import Slide, { SlideRef } from "@shared/slide";
import { useRef } from "react";
import UpdateUserChannel from "@pages/home/widgets/updateUserChannel";
import { useNavigate } from "react-router-dom";


// 模拟数据
const channels = [
    { id: 1, name: "推荐" },
    { id: 2, name: "HTML" },
    { id: 3, name: "开发者资讯" },
    { id: 4, name: "C++" },
    { id: 5, name: "CSS" },
    { id: 6, name: "数据库" },
    { id: 7, name: "区块链" },
    { id: 8, name: "go" },
    { id: 9, name: "产品" },
    { id: 10, name: "后端" },
    { id: 11, name: "linux" },
    { id: 12, name: "人工智能" },
    { id: 13, name: "php" },
    { id: 14, name: "javascript" },
    { id: 15, name: "架构" },
    { id: 16, name: "前端" },
    { id: 17, name: "python" },
    { id: 18, name: "java" },
    { id: 19, name: "科技动态" },
    { id: 20, name: "数码产品" },
];

export default function Channel() {
    const slideRef = useRef<SlideRef | null>(null);
    // 获取用户登录凭据
    const token = useTypedSelector(selectToken);
    const navigate = useNavigate();
    return (

        <div className={styles.container}>
            <div className={styles.list}>
                {channels.map((channel) => (
                    <div key={channel.id} className={classNames(styles.item)} onClick={() => {
                        navigate(`/${channel.id}`);
                        slideRef.current?.close();
                    }}>
                        {channel.name}
                    </div>
                ))}
            </div>
            <div className={styles.aside}>
                <div className={styles.search}>
                    <GeekIcon type={"iconbtn_search"} onClick={() => navigate("/search")} className={styles.search_icon} />
                </div>
                <div className={styles.menu}>
                    <GeekIcon onClick={() => slideRef.current?.open()} type={"iconbtn_channel"} className={styles.channel_icon} />
                </div>
            </div>
            <Slide ref={slideRef} direction={"toRight"}>
                {token ? <UpdateUserChannel slideRef={slideRef} /> : null}
            </Slide>

        </div>
    );
}